<template>
  <div>
    <!-- 头部导航栏 -->
    <div class="header">
      <van-nav-bar title="订单" />
    </div>
    <!-- 订单详情 -->
    <div class="content" style="margin-bottom: 60px">
      <van-tabs v-model="activeName">
        <van-tab title="全部订单" name="">
          <template>
            <div
              v-for="order in orderData"
              class="order"
              :key="order.id"
              @click="switchDetail(order.id)"
            >
              <div class="order_item">
                <div class="orderLeft">
                  <!-- 头像 -->
                  <img
                    :src="order.customer.userFace"
                    alt=""
                    style="width: 100%; height: 100%; border-radius: 50%"
                  />
                </div>
                <div class="orderRight">
                  <div class="order_header" style="height: 20px">
                    <!-- 姓名 -->
                    <span style="float: left; margin-left: 5px">{{
                      order.customer.realname
                    }}</span>
                    <!-- 状态 -->
                    <span
                      v-if="order.status == '已完成'"
                      style="
                        float: right;
                        margin-right: 10px;
                        font-size: 12px;
                        color: green;
                      "
                      >{{ order.status }}</span
                    >
                    <span
                      v-else
                      style="
                        float: right;
                        margin-right: 10px;
                        font-size: 12px;
                        color: #f8825d;
                      "
                      >{{ order.status }}</span
                    >
                  </div>
                  <div class="order_content" style="margin-right: 10px">
                    <!-- 地址 -->
                    <p
                      style="
                        margin-left: 5px;
                        font-weight: 100;
                        font-size: 12px;
                        color: #666;
                      "
                    >
                      {{ order.address.province }}{{ order.address.city
                      }}{{ order.address.area }}{{ order.address.telephone }}
                    </p>
                  </div>
                  <div class="order_bottom" style="15px">
                    <!-- 时间 -->
                    <span style="float: left; margin-left: 5px">{{
                      order.orderTime | dateFormat
                    }}</span>
                    <!-- 价钱 -->
                    <span style="float: right; margin-right: 10px"
                      >¥{{ order.total }}.00</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <van-empty v-if="this.length == 0" description="您没有订单" />
          </template>
        </van-tab>
        <van-tab title="待派单" name="待派单">
          <template>
            <div
              v-for="order in orderData"
              class="order"
              :key="order.id"
              @click="switchDetail(order.id)"
            >
              <div class="order_item" v-if="order.status == '待派单'">
                <div class="orderLeft">
                  <!-- 头像 -->
                  <img
                    :src="order.customer.userFace"
                    alt=""
                    style="width: 100%; height: 100%; border-radius: 50%"
                  />
                </div>
                <div class="orderRight">
                  <div class="order_header" style="height: 20px">
                    <!-- 姓名 -->
                    <span style="float: left; margin-left: 5px">{{
                      order.customer.realname
                    }}</span>
                    <!-- 状态 -->
                    <span
                      style="
                        float: right;
                        margin-right: 10px;
                        font-size: 12px;
                        color: #f8825d;
                      "
                      >{{ order.status }}</span
                    >
                  </div>
                  <div class="order_content" style="margin-right: 10px">
                    <!-- 地址 -->
                    <p
                      style="
                        margin-left: 5px;
                        font-weight: 100;
                        font-size: 12px;
                        color: #666;
                      "
                    >
                      {{ order.address.province }}{{ order.address.city
                      }}{{ order.address.area }}{{ order.address.telephone }}
                    </p>
                  </div>
                  <div class="order_bottom" style="15px">
                    <!-- 时间 -->
                    <span style="float: left; margin-left: 5px">{{
                      order.orderTime | dateFormat
                    }}</span>
                    <!-- 价钱 -->
                    <span style="float: right; margin-right: 10px"
                      >¥{{ order.total }}.00</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <van-empty v-if="this.a == 0" description="您没有待派单订单" />
          </template>
        </van-tab>
        <van-tab title="待接单" name="待接单">
          <template>
            <div
              v-for="order in orderData"
              class="order"
              :key="order.id"
              @click="switchDetail(order.id)"
            >
              <div class="order_item" v-if="order.status == '待接单'">
                <div class="orderLeft">
                  <!-- 头像 -->
                  <img
                    :src="order.customer.userFace"
                    alt=""
                    style="width: 100%; height: 100%; border-radius: 50%"
                  />
                </div>
                <div class="orderRight">
                  <div class="order_header" style="height: 20px">
                    <!-- 姓名 -->
                    <span style="float: left; margin-left: 5px">{{
                      order.customer.realname
                    }}</span>
                    <!-- 状态 -->
                    <span
                      style="
                        float: right;
                        margin-right: 10px;
                        font-size: 12px;
                        color: #f8825d;
                      "
                      >{{ order.status }}</span
                    >
                  </div>
                  <div class="order_content" style="margin-right: 10px">
                    <!-- 地址 -->
                    <p
                      style="
                        margin-left: 5px;
                        font-weight: 100;
                        font-size: 12px;
                        color: #666;
                      "
                    >
                      {{ order.address.province }}{{ order.address.city
                      }}{{ order.address.area }}{{ order.address.telephone }}
                    </p>
                  </div>
                  <div class="order_bottom" style="15px">
                    <!-- 时间 -->
                    <span style="float: left; margin-left: 5px">{{
                      order.orderTime | dateFormat
                    }}</span>
                    <!-- 价钱 -->
                    <span style="float: right; margin-right: 10px"
                      >¥{{ order.total }}.00</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <van-empty v-if="this.b == 0" description="您没有待接单订单" />
          </template>
        </van-tab>
        <van-tab title="待确认" name="待确认">
          <template>
            <div
              v-for="order in orderData"
              class="order"
              :key="order.id"
              @click="switchDetail(order.id)"
            >
              <div class="order_item" v-if="order.status == '待确认'">
                <div class="orderLeft">
                  <!-- 头像 -->
                  <img
                    :src="order.customer.userFace"
                    alt=""
                    style="width: 100%; height: 100%; border-radius: 50%"
                  />
                </div>
                <div class="orderRight">
                  <div class="order_header" style="height: 20px">
                    <!-- 姓名 -->
                    <span style="float: left; margin-left: 5px">{{
                      order.customer.realname
                    }}</span>
                    <!-- 状态 -->
                    <span
                      style="
                        float: right;
                        margin-right: 10px;
                        font-size: 12px;
                        color: #f8825d;
                      "
                      >{{ order.status }}</span
                    >
                  </div>
                  <div class="order_content" style="margin-right: 10px">
                    <!-- 地址 -->
                    <p
                      style="
                        margin-left: 5px;
                        font-weight: 100;
                        font-size: 12px;
                        color: #666;
                      "
                    >
                      {{ order.address.province }}{{ order.address.city
                      }}{{ order.address.area }}{{ order.address.telephone }}
                    </p>
                  </div>
                  <div class="order_bottom" style="15px">
                    <!-- 时间 -->
                    <span style="float: left; margin-left: 5px">{{
                      order.orderTime | dateFormat
                    }}</span>
                    <!-- 价钱 -->
                    <span style="float: right; margin-right: 10px"
                      >¥{{ order.total }}.00</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <van-empty v-if="this.c == 0" description="您没有待确认订单" />
          </template>
        </van-tab>
        <van-tab title="已完成" name="已完成">
          <template>
            <div
              v-for="order in orderData"
              class="order"
              :key="order.id"
              @click="switchDetail(order.id)"
            >
              <div class="order_item" v-if="order.status == '已完成'">
                <div class="orderLeft">
                  <!-- 头像 -->
                  <img
                    :src="order.customer.userFace"
                    alt=""
                    style="width: 100%; height: 100%; border-radius: 50%"
                  />
                </div>
                <div class="orderRight">
                  <div class="order_header" style="height: 20px">
                    <!-- 姓名 -->
                    <span style="float: left; margin-left: 5px">{{
                      order.customer.realname
                    }}</span>
                    <!-- 状态 -->
                    <span
                      style="
                        float: right;
                        margin-right: 10px;
                        font-size: 12px;
                        color: green;
                      "
                      >{{ order.status }}</span
                    >
                  </div>
                  <div class="order_content" style="margin-right: 10px">
                    <!-- 地址 -->
                    <p
                      style="
                        margin-left: 5px;
                        font-weight: 100;
                        font-size: 12px;
                        color: #666;
                      "
                    >
                      {{ order.address.province }}{{ order.address.city
                      }}{{ order.address.area }}{{ order.address.telephone }}
                    </p>
                  </div>
                  <div class="order_bottom" style="15px">
                    <!-- 时间 -->
                    <span style="float: left; margin-left: 5px">{{
                      order.orderTime | dateFormat
                    }}</span>
                    <!-- 价钱 -->
                    <span style="float: right; margin-right: 10px"
                      >¥{{ order.total }}.00</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <van-empty v-if="this.d == 0" description="您没有已完成订单" />
          </template>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
import { get } from "@/http/axios";
export default {
  data() {
    return {
      activeName: "",
      a: 0,
      b: 0,
      c: 0,
      d: 0,
      length: 0,
      customerId: "",
    };
  },
  computed: {
    // 获取订单数据
    ...mapState("order", ["orderData"]),
    //获取用户数据
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    //引入获取订单的方法
    ...mapActions("order", ["getAllOrderData"]),
    //引入获取用户信息的方法
    ...mapActions("user", ["getUserInfo"]),
    //跳转订单详情页面
    switchDetail(id) {
      this.$router.push({
        path: "orderdetail",
        query: { id },
      });
    },
    //获取用户订单数据
    queryOrder() {
      let data = {
        page: 1,
        pageSize: 20,
        customerId: this.customerId,
      };
      //调用获取产品数据的方法
      this.getAllOrderData(data);
    },
    // 获取所有订单状态
    queryAllStatus() {
      let order = {};
      let a = 0,b = 0,c = 0,d = 0;
      this.length = this.orderData.length;
      for (let index = 0; index < this.orderData.length; index++) {
        order = this.orderData[index];
        if (order.status == "待派单") {
          a++;
        }
        if (order.status == "待接单") {
          b++;
        }
        if (order.status == "待确认") {
          c++;
        }
        if (order.status == "已完成") {
          d++;
        }
      }
      this.a = a;this.b = b;this.c = c;this.d = d;
    },
  },
  created() {
    //获取用户数据
    this.getUserInfo().then((r) => {
      this.customerId = this.userInfo.id;
      //获取用户订单信息
      this.queryOrder();
      //获取所有订单状态
      this.queryAllStatus();
    });
  },
};
</script>

<style scoped>
.order {
  position: relative;
  margin: 15px 15px 15px 15px;
  /* box-shadow: 0 0 2px 3px #ccc; */
  /* border: 1px solid #ccc; */
  /* font-family: 黑体; */
  font-size: 15px;
  background-color: #f3f3f3;
  border-radius: 10px;
}
.order_item {
  position: relative;
  display: flex;
  width: 95.5%;
  height: 87px;
  /* margin: 7px 7px 7px 7px; */
  padding: 7px 7px 7px 7px;
  /* border: 1px solid black; */
}
.orderLeft {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* border: 1px solid black; */
}
.orderRight {
  margin-left: 10px;
  flex: 2;
  height: 80px;
  /* border: 1px solid black; */
}
</style>